'use client'
import React from 'react'
import { Message, Upload } from '@arco-design/web-react'
import { IconUpload } from '@arco-design/web-react/icon'
import '@arco-design/web-react/dist/css/arco.css'

type UploadIconProps = {
  onFileUpload?: (file: File) => void
  className?: string
  size?: 'small' | 'medium' | 'large'
}

const UploadIcon: React.FC<UploadIconProps> = ({
  onFileUpload,
  className = '',
  size = 'medium',
}) => {
  const handleUpload = (file: File, fileList: File[]) => {
    console.log('file', file)
    console.log('fileList', fileList)
    if (onFileUpload)
      onFileUpload(file)

    Message.success('文件上传成功')
    return true
  }

  const sizeClasses = {
    small: 'text-xs',
    medium: 'text-sm',
    large: 'text-base',
  }

  return (
    <Upload
      action='/'
      onChange={(_, currentFile) => {
        console.log('currentFile', currentFile)
      }}
      beforeUpload={handleUpload}
      showUploadList={false}
    >
      <button
        className={`flex items-center justify-center ${sizeClasses[size]} text-gray-500 hover:text-gray-700 focus:outline-none ${className}`}
        title="上传文件"
      >
        <IconUpload />
      </button>
    </Upload>
  )
}

export default UploadIcon
